<template>
  <div class="search">
    <Card>
      <Row class="operation padding-row" v-if="!addShow">
        <Button @click="addShow = true" type="primary">添加</Button>
      </Row>
      <Row v-else>
        <Form inline :label-width="80" class="search-form">
          <Form-item label="等级" prop="level">
            <Input
              type="text"
              v-model="editForm.level"
              placeholder="请输入等级"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="等级名称" prop="gradeName">
            <Input
              type="text"
              placeholder="请输入等级名称"
              v-model="editForm.gradeName"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="消费门槛(元)" prop="experienceValue">
            <Input
              type="number"
              placeholder="请输入消费门槛"
              v-model="editForm.experienceValue"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Button @click="handleSave" class="search-btn" type="primary">保存</Button>
          <Button @click="addShow = false" class="search-btn">取消</Button>
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      >
        <template slot-scope="{ row }" slot="action">
          <Button type="error" style="margin-right: 5px" @click="handleEdit(row)"
            >编辑</Button
          >
          <Button @click="handleDel(row)">删除</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="paging.pageNumber"
          :total="total"
          :page-size="paging.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>
    <Modal v-model="editShow" title="会员等级信息编辑">
      <Form ref="editForm" :label-width="100">
        <Form-item label="等级" prop="level">
          <Input
            type="text"
            v-model="editForm.level"
            placeholder="请输入等级"
            clearable
            style="width: 100%"
          />
        </Form-item>
        <Form-item label="等级名称" prop="gradeName">
          <Input
            type="text"
            placeholder="请输入等级名称"
            v-model="editForm.gradeName"
            clearable
            style="width: 100%"
          />
        </Form-item>
        <Form-item label="消费门槛(元)" prop="experienceValue">
          <Input
            type="number"
            placeholder="请输入消费门槛"
            v-model="editForm.experienceValue"
            style="width: 100%"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="editShow = false">取消</Button>
        <Button type="primary" @click="handleSubmit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  addMemberGrade,
  editMemberGrade,
  memberGradeList,
  delMemberGrade,
} from "@/api/shopNewApi.js";

export default {
  name: "member-grade",
  data() {
    return {
      editForm: { level: "", gradeName: "", experienceValue: "" }, //编辑表单
      addShow: false, //是否添加会员等级
      editShow: false, //编辑弹框
      paging: {
        pageNumber: 1,
        pageSize: 10,
      },
      loading: true, // 表单加载状态
      columns: [
        { title: "等级", key: "level", tooltip: true },
        { title: "等级名称", key: "gradeName", tooltip: true },
        { title: "消费门槛（元）", key: "experienceValue", tooltip: true },
        { title: "操作", slot: "action", align: "center", fixed: "right" },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  watch: {
    editShow(v) {
      if (!v) {
        this.editForm = {
          level: "",
          gradeName: "",
          experienceValue: "",
        };
      }
    },
    addShow(v) {
      if (!v) {
        this.editForm = {
          level: "",
          gradeName: "",
          experienceValue: "",
        };
      }
    },
  },
  methods: {
    getList() {
      this.loading = true;
      memberGradeList(this.paging)
        .then((res) => {
          this.data = res.result.records;
          this.total = parseInt(res.result.total);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 分页 改变页码
    changePage(v) {
      this.paging.pageNumber = v;
      this.getList();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.paging.pageSize = v;
      this.paging.pageNumber = 1;
      this.getList();
    },
    // 保存
    handleSave() {
      if (!this.editForm.level || !this.editForm.gradeName || !this.editForm.experienceValue) {
        this.$Message.warning("请填写完整表单");
        return;
      }
      addMemberGrade(this.editForm).then((res) => {
        if (res.code == 200) {
          this.addShow = false;
          this.getList();
        }
      });
    },
    //保持编辑
    handleSubmit() {
      editMemberGrade(this.editForm).then((res) => {
        if (res.code == 200) {
          this.editShow = false;
          this.getList();
        }
      });
    },
    //编辑
    handleEdit(e) {
      this.editForm.id = e.id;
      this.editForm.level = e.level;
      this.editForm.experienceValue = e.experienceValue;
      this.editForm.gradeName = e.gradeName;
      this.editShow = true;
    },
    //删除
    handleDel(e) {
      this.$Modal.confirm({
        title: "确认删除",
        content: `您确认要删除该等级?`,
        loading: true,
        onOk: () => {
          delMemberGrade(e.id).then((res) => {
            if (res.success) {
              this.$Modal.remove();
              this.paging.pageNumber = 1;
              this.paging.pageSize = 10;
              this.getList();
            }
          });
        },
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.f-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  div {
    margin-right: 20px;
    width: 80px;
  }
}
::v-deep .ivu-modal-body {
  padding-top: 50px;
}
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
